<script setup lang="ts">
import * as THREE from 'three'
import { onMounted } from 'vue';

const ThreeObj = {} as IThreeObj

const width = window.innerWidth
const height = window.innerHeight

const createBox = () => {
    const gemory = new THREE.BoxGeometry(50, 50, 50)
    const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 })
    const cube = new THREE.Mesh(gemory, material)
    cube.position.set(0, 0, 0)
    ThreeObj.gemory = cube
}

const createCamera = () => {
    const camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000)
    camera.position.set(200, 200, 200)
    camera.lookAt(ThreeObj.gemory.position)
    ThreeObj.camera = camera
}

const createRenderer = () => {
    const renderer = new THREE.WebGLRenderer({
        antialias: true,
    })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setClearColor(0x000000)
    renderer.setSize(width, height)
    document.getElementById('three')?.appendChild(renderer.domElement)
    ThreeObj.renderer = renderer
}

const createLight = () => {
    const ambient = new THREE.AmbientLight(0xffffff)
    const deriction = new THREE.DirectionalLight(0xffffff, 1)
    deriction.position.set(100, 200, 50)
    ThreeObj.ambient = ambient
    ThreeObj.deriction = deriction
}

const createScene = () => {
    createBox()
    createCamera()
    createRenderer()
    createLight()
}

const initScene = () => {
    const scene = new THREE.Scene()
    scene.add(ThreeObj.gemory)
    scene.add(ThreeObj.ambient)
    scene.add(ThreeObj.deriction)
    ThreeObj.scene = scene
}

const render = () => {
    initScene()
    ThreeObj.renderer.clear()
    ThreeObj.renderer.render(ThreeObj.scene, ThreeObj.camera)
    ThreeObj.gemory.rotation.x += 0.01
    ThreeObj.gemory.rotation.y += 0.01
    requestAnimationFrame(render)
}

onMounted(() => {
    createScene()
    render()
})
</script>

<template>
    <div id="three"></div>
</template>